<template>
  <view>
    <view v-for="(item, index) in newOrderResData" :key="index" class="moreOrderItem">
      <!-- order_split_status`  '拆分状态：0=>未拆分；10=>拆分中；20=>已拆分 -->
      <template v-if="item.order_split_status == 20">
        <view v-for="(subItem, subIndex) in item.subOrderList" :key="subIndex">
          <view class="status">
            <view class="plat">
              <image :src="(subItem.platform == 10 || subItem.platform == 20) ? '/static/orderIcon/platform.png' : '/static/orderIcon/store.png'" />
              <!-- {{(subItem.platform == 10 || subItem.platform == 20) ? '鑫方盛平台' : '鑫方盛门店'}}
              门店的单子platform=50包括----鸿鹄开票的 门店扫码的
              小程序下单的属于线上的单子
              -->
              订单号：{{ subItem.order_id }}
            </view>
            <image
              v-if="(subItem.platform == 10 || subItem.platform == 20) && subItem.order_status != 10 && subItem.order_status != 100"
              class="invoice-status-icon"
              :src="orderInvoiceStatusIcon[getOrderInvoiceStatusFn(subItem)]"
            />
            <image
              v-if="subItem.platform ==50"
              class="invoice-status-icon"
              :src="orderInvoiceStatusIcon[MgetOrderInvoiceStatusFn(subItem)]"
            />
            <text>{{ statusAllList[subItem.order_status] }}</text>
          </view>
          <view :style="{'height' : subItem.showMore ? '570rpx' : 'auto','overflow': 'hidden'}" @click="handleViewDetails(subItem)">
            <view v-for="(result, resultIndex) in subItem.listOrderItems" :key="resultIndex" class="itemShop">
              <view class="product-img-wrap">
                <image :src="result.product_pic" />
                <!-- 1 - 危险品； 2 - 管制刀具； 3 - 未限制    1,2展示危险标识 -->
                <view v-if="[1, 2].includes(result.restricted)" class="danger_icon">&#xe650;</view>
              </view>
              <view class="shopInfo">
                <view class="title">{{ result.product_name }}</view>
                <view class="code">编码：{{ result.product_code }}</view>
                <view class="price">
                  <view class="speci">
                    <text>￥{{ priceFilter(subItem.separate_shipping_fee, result) }}</text>/{{ result.unit_name }}
                  </view>
                  ×{{ result.buyyer_count }}
                </view>
              </view>
            </view>
          </view>
          <!-- 平台的订单都查出来了  门店的超过3条只返回3条   -->
          <view v-if="subItem.platform==50">
            <view v-if="subItem.order_total_count > 3" class="moreLook">
              <view @click="handleViewDetails(subItem)">查看全部商品<text class="font_family icon-a-arrowdown_tongyong_1" /></view>
            </view>
          </view>
          <view v-else>
            <view v-if="subItem.listOrderItems.length > 3" class="moreLook">
              <view v-if="subItem.listOrderItems.length > 3" @click="changeHeight(index, subItem.listOrderItems.length)">查看全部商品<text class="font_family icon-a-arrowdown_tongyong_1" /></view>
              <view v-else @click="changeHeight(index)">收起<text class="font_family icon-a-arrowup_tongyong_1" /></view>
            </view>
          </view>
          <view class="allShopNum">
            共{{ subItem.listOrderItems.length }}件商品
            <view class="allPrice">
              实付金额：
              <text>￥{{ getRelPrice(subItem) }}</text>
            </view>
          </view>
          <Footer
            :date="date"
            :order-info="subItem"
            :is-store-order="disableViewDetails(subItem)"
            @showPop="showPop"
            @showCancel="showCancel"
            @changeShow="changeShow(index)"
            @reloadOrder="reloadOrder"
          />
        </view>
      </template>
      <template v-else>
        <view class="status">
          <view class="plat">
            <image :src="(item.platform == 10 || item.platform == 20) ? '/static/orderIcon/platform.png' : '/static/orderIcon/store.png'" />
            <!-- {{(item.platform == 10 || item.platform == 20) ? '鑫方盛平台' : '鑫方盛门店'}}-->
            订单号：{{ item.order_id }}
          </view>
          <image
            v-if="(item.platform == 10 || item.platform == 20) && item.order_status != 10 && item.order_status != 100"
            class="invoice-status-icon"
            :src="orderInvoiceStatusIcon[getOrderInvoiceStatusFn(item)]"
          />
          <image
            v-if="item.platform ==50"
            class="invoice-status-icon"
            :src="orderInvoiceStatusIcon[MgetOrderInvoiceStatusFn(item)]"
          />
          <text>{{ statusAllList[item.order_status] }}</text>
        </view>
        <view :style="{'height' : item.showMore ? '570rpx' : 'auto','overflow': 'hidden'}" @click="handleViewDetails(item)">
          <view v-for="(result, resultIndex) in item.listOrderItems" :key="resultIndex" class="itemShop">
            <view class="product-img-wrap">
              <image :src="result.product_pic" />
              <!-- 1 - 危险品； 2 - 管制刀具； 3 - 未限制    1,2展示危险标识 -->
              <view v-if="[1, 2].includes(result.restricted)" class="danger_icon">&#xe650;</view>
            </view>
            <view class="shopInfo">
              <view class="title">{{ result.product_name }}</view>
              <view class="code">编码：{{ result.product_code }}</view>
              <view class="price">
                <view class="speci">
                  <text>￥{{ result.endPrice }}</text>/{{ result.unit_name }}
                </view>
                ×{{ result.buyyer_count }}
              </view>
            </view>
          </view>
        </view>
        <!-- 平台的订单都查出来了  门店的超过3条只返回3条   -->
        <view v-if="item.platform==50">
          <view v-if="item.order_total_count > 3" class="moreLook">
            <view @click="handleViewDetails(item)">查看全部商品<text class="font_family icon-a-arrowdown_tongyong_1" /></view>
          </view>
        </view>
        <view v-else>
          <view v-if="item.listOrderItems.length > 3" class="moreLook">
            <view v-if="item.showMore" @click="changeHeight(index, item.listOrderItems.length)">查看全部商品<text class="font_family icon-a-arrowdown_tongyong_1" /></view>
            <view v-else @click="changeHeight(index)">收起<text class="font_family icon-a-arrowup_tongyong_1" /></view>
          </view>
        </view>
        <view class="allShopNum">
          共{{ item.order_total_count }}件商品
          <view class="allPrice">
            实付金额：
            <text>￥{{ getRelPrice(item) }}</text>
          </view>
        </view>
        <Footer
          :date="date"
          :order-info="item"
          :is-store-order="disableViewDetails(item)"
          @showPop="showPop"
          @showCancel="showCancel"
          @changeShow="changeShow(index)"
          @reloadOrder="reloadOrder"
        />
      </template>
    </view>
  </view>
</template>

<script>
import Footer from '@/components/order-list/Footer';

export default {
  components: {
    Footer
  },
  props: {
    orderResData: {
      type: Array,
      default: () => []
    },
    cancleShow: {
      type: Boolean,
      default: false
    },
    cancleParams: {
      type: Object,
      default: null
    },
    platVal: {
      type: Number,
      default: 2
    },
    date: {
      type: String,
      default: ''
    },
    statusCode: {
      type: [String, Number],
      default: ''
    }
  },
  data() {
    return {
      orderInvoiceStatusIcon: {
        uninvoiced: '/static/orderIcon/uninvoiced_icon.png',
        invoiceing: '/static/orderIcon/invoiceing_icon.png',
        invoiced: '/static/orderIcon/invoiced_icon.png',
      },
      // orderInvoiceStatus: 'uninvoiced',
      newOrderResData: [],
      statusList: {
        '9': '待审批',
        '10': '待付款',
        '30': '待配货',
        '50': '待发货',
        '60': '待收货',
        '70': '待结算',
        '80': '订单成功',
        '90': '交易完成',
        '100': '订单取消',
        '110': '交易关闭'
      },
      statusAllList: {
        '9': '待审批',
        '10': '待付款',
        '20': '待审核',
        '30': '待配货',
        '40': '待出库',
        '50': '待发货',
        '60': '待收货',
        '70': '待结算',
        '80': '订单成功',
        '90': '交易完成',
        '100': '订单取消',
        '110': '交易关闭'
      },
      actionBar: [
        {
          label: '去确认', // 按钮名称
          clickFn: this.jumpToOrderPage, // 点击事件方法
          showFn: this.checkConfirmBtnVisible // 显隐判断方法
        },
        {
          label: '去支付',
          clickFn: this.jumpToOrderPage,
          showFn: this.checkPayBtnVisible
        },
        {
          label: '提货信息',
          clickFn: this.jumpToPickUpInfoPage,
          showFn: this.checkDeliveryBtnVisible
        }
      ]
    }
  },
  computed: {
    curDate() {
      return this.date
    }
  },
  watch: {
    orderResData(newVal, oldVal) {
      console.log(newVal);
      if (newVal != oldVal) {
        this.reloadList(newVal)
      }
    }
  },
  mounted() {
    this.reloadList(this.orderResData)
  },
  methods: {
    reloadOrder() {
      this.$emit('reloadList')
    },
    goDetail(e) {
      // const { accountType } = this.vuex_memberInfo
      // if (Number(accountType) == 10) {
      //   uni.navigateTo({
      //     url: '/orders/order-details/order-details?orderNo=' + e.order_id
      //   })
      // } else
      //platform '订单来源平台：普通平台-10；签约平台-20；分销平台-25；27-慧采平台；第三方平台-30;对接平台-40；服务商-41;管家婆-42；50-门店订单', 50是门店其他的都是平台
      const { accountType } = this.vuex_memberInfo //  账户类型：10:签约用户/数采；20:普通用户;30认证用户;39普通会员-分销;40分销用户；
      if (e.platform == 20 && e.order_status == 10 && this.statusCode == '') { // 当前tab为全部，订单为门店下，订单状态是待付款时，不能跳转详情
        if (accountType == 20 || accountType == 30) { // 云采
          return uni.showToast({ title: '当前订单无法查看，请通过【待付款】进行订单查看和操作！', icon: 'none' });
        } else { // 数采
          return uni.showToast({ title: '当前订单无法查看，请通过【待处理】进行订单查看和操作！', icon: 'none' });
        }
      } else if (e.platform == 10 || e.platform == 20) {
        uni.navigateTo({
          url: `/orders/moreOrderDetail/index?id=${e.order_id}`
        })
      } else {
        uni.navigateTo({
          url: '/orders/order-details/order-details?orderNo=' + e.order_id
        })
      }
    },
    changeShow(index) {
      this.newOrderResData[index].cancleBtnShow = !this.newOrderResData[index].cancleBtnShow
    },
    showPop() { // 更新订单底部弹出
      this.$emit('update:cancleShow', true)
    },
    showCancel(obj) { // 更新取消订单所需参数
      console.log(obj)
      this.$emit('update:cancleParams', obj)
    },
    reloadList(arr) {
      this.newOrderResData = arr.map((item) => {
        const showMore = item.listOrderItems.length > 3
        const { separate_shipping_fee } = item
        var newList = item.listOrderItems.map((result) => {
          const { sale_price, activity_type, promotion_value, origin_buyer_count, fare } = result
          var showPrice = sale_price
          var specialOffer = 0
          if (activity_type == 10) {
            specialOffer = promotion_value / origin_buyer_count
          }
          if (separate_shipping_fee == 20) {
            showPrice = (fare / origin_buyer_count) + sale_price
          }
          var endPrice = (showPrice - specialOffer).toFixed(2)
          return { ...result, endPrice }
        })
        return { ...item, showMore, cancleBtnShow: false, listOrderItems: newList }
      })
    },
    /*价格计算*/
    priceFilter(separateShippingFee, goodResult) {
      const { sale_price, activity_type, promotion_value, origin_buyer_count, fare } = goodResult
      var showPrice = sale_price
      var specialOffer = 0
      if (activity_type == 10) {
        specialOffer = promotion_value / origin_buyer_count
      }
      if (separateShippingFee == 20) {
        showPrice = (fare / origin_buyer_count) + sale_price
      }
      var endPrice = showPrice - specialOffer
      return endPrice
    },
    changeHeight(index, length = '') {
      // if (!!length && length > 9) {
      //   uni.navigateTo({})
      // }
      this.$set(this.newOrderResData[index], 'showMore', !this.newOrderResData[index].showMore)
    },
    // 查看详情
    handleViewDetails(item) {
      console.log(this.disableViewDetails(item));
      this.disableViewDetails(item) ? () => {} : this.goDetail(item) // 门店订单待付款状态订单不可查看详情
    },
    // 获取实付金额
    getRelPrice(item) {
      if (!this.isStoreOrder(item)) return Number(item.paid_amount).toFixed(2) // 非门店订单默认展示
      return item.showProductPrice == 1 ? Number(item.paid_amount).toFixed(2) : '*.*'
    },
    isStoreOrder({ platform }) {
      return platform == 50 // platform为50时，是门店订单
    },
    // 是否为门店订单
    disableViewDetails(item) {
      const isWatPay = item.order_status == 0 || item.order_status == 10 // 是线下待付款状态订单
      return this.isStoreOrder(item) && isWatPay
    },
    /*判断开票状态，返回标识
    * 是否开发票 10：已开 20：未开 num? invoice_sorce;
    * 10|20|60：未开 30：部分开 其他：已开
    * 后台发票状态：'发票状态：10=>待开；20=>开票中；30=>部分开；40=>已开；50=>已发；60=>下单时选择开票' num? invoice_status;
    * uninvoiced: 未开票  invoiceing: 开票中  invoiced: 已开票
    *  */
    getOrderInvoiceStatusFn(orderItem) {
      let invoiceStatus = 'uninvoiced'
      if (orderItem?.orderInvoice?.invoice_sorce == 10 || orderItem?.orderInvoice?.invoice_sorce == 20) {
        var curStatus = orderItem?.orderInvoice?.invoice_status;
        if (curStatus == 10 || curStatus == 60) {
          invoiceStatus = 'uninvoiced'
        } else if (curStatus == 40 || curStatus == 50) {
          invoiceStatus = 'invoiced'
        } else {
          invoiceStatus = 'invoiceing'
        }
      }
      return invoiceStatus
    },
    MgetOrderInvoiceStatusFn(orderItem) {
      //门店单子 发票状态: 完全开票 = 2, 部分开票 = 1,未开发票 = 0 invoiceStatus;
      let invoiceStatus = 'uninvoiced'
      if (orderItem.invoiceStatus == 0) {
        invoiceStatus = 'uninvoiced'
      } else if (orderItem.invoiceStatus == 2) {
        invoiceStatus = 'invoiced'
      } else if (orderItem.invoiceStatus == 3) {
        invoiceStatus = 'invoiceing'
      }

      return invoiceStatus
    },
  }
}
</script>

<style scoped lang="scss">
.moreOrderItem {
  padding: 16rpx 24rpx;
  border-radius: 8rpx;
  background: #FFFFFF;
  box-sizing: border-box;
  padding-bottom: 32rpx;
  margin-top: 20rpx;
  .status {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-content: center;
    .plat {
      color: #000000;
      font-size: 24rpx;
      font-weight: 400;
      display: flex;
      justify-content: flex-start;
      align-content: center;
      align-items: center;
      image {
        width: 96rpx;
        height: 40rpx;
        margin-right: 14rpx;
      }
    }
    .invoice-status-icon {
      width: 64rpx;
      height: 64rpx;
      float: left;
      margin-right: -50rpx;
    }
    text {
      color: #FF5533;
    }
  }
  .itemShop {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-content: center;
    padding: 7rpx 0rpx;
    box-sizing: border-box;
    image {
      width: 176rpx;
      height: 176rpx;
      margin-right: 24rpx;
      flex-shrink: 0;
    }
    .shopInfo {
      width: 100%;
      .title {
        color: #000000;
        font-size: 24rpx;
        font-weight: 400;
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        line-clamp: 2;
        -webkit-line-clamp: 2;
      }
      .code {
        color:$uni-text-color-tips;
        font-size: 24rpx;
        font-weight: 400;
        margin-top: 8rpx;
      }
      .price {
        display: flex;
        justify-content: space-between;
        color:$uni-text-color-tips;
        font-size: 24rpx;
        font-weight: 400;
        margin-top: 8rpx;
        .speci {
          display: flex;
          color:$uni-text-color;
          font-size: 24rpx;
          font-weight: 400;
          text {
            color: #FF5533;
            font-size: 24rpx;
            font-weight: 700;
          }
        }
      }
    }
  }
  .moreLook {
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    color:$uni-text-color-tips;
    font-size: 24rpx;
    font-weight: 400;
    margin-top: 32rpx;
    view {
      display: flex;
      justify-content: center;
      align-content: center;
      align-items: center;
    }
    .font_family {
      color:  $uni-text-color-tips;
      font-size: $uni-font-size-lg;
      margin-left: 5rpx;
    }
  }
  .allShopNum {
    padding-top: 30rpx;
    box-sizing: border-box;
    border-top: 1rpx solid #F5F5F5;
    color:$uni-text-color-tips;
    font-size: 24rpx;
    font-weight: 400;
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-content: center;
    margin-top: 32rpx;
    .allPrice {
      color:$uni-text-color;
      font-size: 24rpx;
      font-weight: 400;
      text {
        color: #FF5533;
        font-size: 28rpx;
        font-weight: 700;
      }
    }
  }
}
.product-img-wrap {
  position: relative;
  .danger_icon {
    position: absolute;
    font-family: 'xfs_iconfont' !important;
    font-size: 32rpx;
    color: #d23433;
    bottom: 4rpx;
    right: 4rpx;
  }
}
</style>
